<template>
  <div class="up-box">
    <el-upload class="upload-demo" drag :action="'http://124.70.196.178:8080/intelligent_control_webservice_eeds/pc/upload/uploadFile/'" :show-file-list="true" :headers="headers" name="file" list-type="text" :file-list="fileList" :on-success="upSuccess" :before-upload="beforeUploadBanner">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传三维模型文件，且不超过200M</div>
    </el-upload>
    <img src="../assets/apk.png" v-if="fileUrl" :title="fileUrl" style="margin-left: 20px" />
  </div>
</template>
<script>
export default {
  props: {
    fileUrl: { type: String, default: '' }
  },
  computed: {
    headers() {
      return {
        Authorization: window.localStorage.getItem('token')
      }
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  watch: {
    fileUrl(val) {
      if (val && val != '') {
        this.fileList = [
          {
            name: '三维模型',
            url: ''
          }
        ]
      } else {
        this.fileList = []
      }
    }
  },
  methods: {
    upSuccess(res) {
      if (res.code == 200) {
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'success'
        })
        this.$emit('setFile', res.data)
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 上传前
    beforeUploadBanner(file) {
      // let fileType = file.type;
      // if (!fileType || fileType == "" || fileType == undefined) {
      //   let arr = file.name.split(".");
      //   fileType = arr[arr.length - 1];
      // }
      // const isFile =
      //   ["apk", "application/vnd.android.package-archive"].indexOf(fileType) !=
      //   -1;
      const isFile = true
      const isLt2M = file.size / 1024 / 1024 < 200

      // if (!isFile) {
      //   this.$message.error("上传文件只能是apk格式!");
      //   return false;
      // }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过200MB!')
        return false
      }

      return isFile && isLt2M
    }
  }
}
</script>
<style lang="less" scoped>
.up-box {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;

  .up-prompt {
    margin-left: 30px;
    color: red;
  }
}

.avatar-uploader {
  width: 100px;
  height: 40px;
  border: solid 1px #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
}

.avatar-uploader-icon {
  width: 100%;
  display: block;
  font-size: 20px;
  padding: 5px;
}

.File-avatar {
  width: 280px;
  height: 130px;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upIcon {
  color: #999;
  font-size: 50px;
}
</style>